<template>
  <div class="riskWarning">
    <button class="return" @click="returnBack">
      <img src="@/assets/pic2/转到.png" title="返回" />
    </button>
    <!-- 标题 -->
    <div class="title">台区风险监测预警</div>
    <!-- 填报项 -->
    <div class="items">
      <div>
        <p class="key">负载率阈值：</p>
        <span>></span>
        <el-input-number v-model="loadRate" />
        <span class="unit">%</span>
      </div>
      <div>
        <p class="key">供电半径阈值：</p>
        <span>></span><el-input-number v-model="supplyRadius" />
        <span class="unit">m</span>
      </div>
    </div>
    <!-- 按钮 -->
    <div class="buttonList">
      <el-checkbox v-model="useRate" label="启用负载率阈值" class="checkbox" />
      <el-checkbox
        v-model="useRadius"
        label="启用供电半径阈值"
        class="checkbox"
      />
      <el-button type="primary" @click="search" class="button">
        <img src="@/assets/pic2/搜索(选中).png" alt="" />
        筛选台区</el-button
      >
    </div>
    <!-- 不合格列表 -->
    <div class="title">风险监测结果</div>
    <transition name="buildingListFade">
      <div class="lowerList" v-show="buildingListShow">
        <div v-for="data in lowerList" :key="data.address">
          <div></div>
          <p>
            {{ data.address }}
          </p>
          <span :class="data.isQualifiedRate">{{ data.loadRate }}</span>
          <span :class="data.isQualifiedRadius">{{ data.supplyRadius }}</span>
          <span style="display: none">{{ data.fid }}</span>
        </div>
      </div>
    </transition>
  </div>
</template>

<script>
/* eslint-disable */
import { onMounted, getCurrentInstance, ref } from "@vue/runtime-core";
import pubsub from "pubsub-js";
import { useRouter, useRoute } from "vue-router";

import buildingJSON from "@/json/大同村房屋面1128.json";
import transformerJSON from "@/json/变压器点位1130.json";

export default {
  name: "风险预警",
  data() {
    return {
      needRedo: false,
      loadRate: 80,
      supplyRadius: 500,
      loadProportion: 0,
      supplyRadiusProportion: 0,
      lowerList: [],
      buildingListShow: false,
      useRate: true,
      useRadius: true,
    };
  },
  setup() {
    const { proxy } = getCurrentInstance();
    const router = useRouter();
    const route = useRoute();

    /**
     * 图表模板
     * title.subtext:筛选项目名称
     * series[0].data:[{value:数值,name:名称}]
     */
    let optionTemplate = {
      title: {
        text: "总体合格情况",
        left: "center",
      },
      tooltip: {
        trigger: "item",
      },
      series: [
        {
          name: "Access From",
          type: "pie",
          radius: "50%",
        },
      ],
    };

    onMounted(() => {
      // 检查路由中是否有参数
      if (Object.entries(route.query).length != 0) {
        // 参数更新
        proxy.loadRate = route.query.loadRate;
        proxy.supplyRadius = route.query.supplyRadius;
        proxy.useRate = route.query.useRate === "true" ? true : false;
        proxy.useRadius = route.query.useRadius === "true" ? true : false;
        // 执行查询
        search();
      }
    });

    // 筛选台区
    function search() {
      // 执行筛选
      let resultList = Screening();
      // 绘制echarts
      drawEcharts(resultList);
      // 填充列表
      makeList(resultList);
    }

    // 执行筛选
    function Screening() {
      let loadRate = proxy.loadRate / 100;
      let supplyRadius = proxy.supplyRadius;
      //   执行筛选
      let resultList = [];
      transformerJSON.features.forEach((element) => {
        let attributes = element.attributes;
        // console.log(attributes["F2023_ZDFZL"], loadRate);
        // console.log(attributes["GDBJ"], supplyRadius);
        if (
          (proxy.useRate && Number(attributes["F2023_ZDFZL"]) > loadRate) ||
          (proxy.useRadius && Number(attributes["GDBJ"]) > supplyRadius)
        ) {
          resultList.push(element);
        }
      });
      console.log(resultList);
      return resultList;
    }

    // 绘制echarts
    function drawEcharts(list) {
      let totalCount = transformerJSON.features.length;
      let lowerCount = list.length;
      // 计算不合格的占比
      proxy.loadProportion = (lowerCount / totalCount).toFixed(2);
    }

    // 填充列表
    function makeList(list) {
      // 开启显示
      proxy.buildingListShow = true;
      //   填入列表
      proxy.lowerList = [];
      list.forEach((element) => {
        let supplyRadius = Number(element.attributes["GDBJ"]);
        let loadRate = (
          Number(element.attributes["F2023_ZDFZL"]) * 100
        ).toFixed(2);
        proxy.lowerList.push({
          address: element.attributes["BYQMC"].split("（")[0],
          fid: element.attributes["OBJECTID"],
          supplyRadius: "(" + supplyRadius + "m)",
          loadRate: "(" + loadRate + "%)",
          isQualifiedRate: proxy.useRate
            ? loadRate - proxy.loadRate < 0
              ? "qualifiedTrue"
              : "qualifiedFalse"
            : "noUse",
          isQualifiedRadius: proxy.useRadius
            ? supplyRadius - proxy.supplyRadius < 0
              ? "qualifiedTrue"
              : "qualifiedFalse"
            : "noUse",
        });
      });
      // 绑定事件
      setTimeout(() => {
        // 读取元素列表
        let nodeList = Array.from(document.querySelectorAll(".lowerList>div"));
        nodeList.forEach((node) => {
          node.addEventListener("click", () => {
            let eventNode =
              event.target.tagName != "SPAN"
                ? event.target
                : event.target.parentNode;
            let num = "";
            if (eventNode.children.length === 0) {
              num = Array.from(eventNode.parentNode.children)[3].innerHTML;
            } else {
              num = Array.from(eventNode.children)[3].innerHTML;
            }
            // 匹配楼栋
            buildingJSON.features.forEach((e) => {
              if (e.attributes["OBJECTID"] === Number(num)) {
                // 去除网格线
                pubsub.publish("netChange", { new: false });
                pubsub.publish("buildingSelected", e);
                pubsub.publish("riskParams", {
                  loadRate: proxy.loadRate,
                  supplyRadius: proxy.supplyRadius,
                });
                router.push({
                  path: "/buildingSelected",
                });
              }
            });
            // 匹配变压器
            transformerJSON.features.forEach((e) => {
              if (
                e.attributes["BYQMC"].split("（")[0] === eventNode.innerHTML
              ) {
                // console.log(e);
                pubsub.publish("transformerSelected", e);
                pubsub.publish("buildingSelected", e);
                router.push({
                  path: "/buildingSelected",
                });
                setTimeout(() => {
                  pubsub.publish("riskParams", {
                    loadRate: proxy.loadRate,
                    supplyRadius: proxy.supplyRadius,
                    useRate: proxy.useRate,
                    useRadius: proxy.useRadius,
                  });
                }, 300);
              }
            });
          });
        });
      }, 300);
    }

    // 返回首页
    function returnBack() {
      router.push({
        path: "/main",
      });
    }

    return { search, returnBack };
  },
};
</script>

<style lang="less" scoped>
.riskWarning {
  background-color: transparent;
  height: 100%;
  width: 100%;
  color: white;
  > .title {
    background-image: ~"url(@{app-images-root}/button_bg6.png)";
    background-size: 100% 100%;
    font-size: 250%;
    font-weight: bold;
    width: 70%;
    padding-left: 4%;
    padding-bottom: 1%;
    margin-top: 4%;
    margin-left: 2%;
  }
  > .items {
    > div {
      width: 100%;
      padding: 2% 0%;
      font-size: 170%;
      font-weight: bold;
      margin-left: 1%;
      border-bottom: 1px solid;
      border-image: linear-gradient(to right, #fff, #0000);
      border-image-slice: 1;
      > * {
        margin-left: 1.5%;
      }

      .input {
        width: 10%;
      }
      > .key {
        -webkit-text-stroke: 0.75px #fff;
        color: #1296db;
        margin-right: 0.5%;
        font-size: 150%;
      }
      > .unit {
        font-size: 80%;
      }
    }
  }
  > .buttonList {
    margin: 2%;
    .checkbox {
      color: white;
      font-weight: bold;
      display: inline-block;
      width: 40%;
    }
  }
  > .dataList {
    font-weight: bold;
  }
}

.button {
  font-size: 110%;
  > span {
    > img {
      height: 20px;
    }
  }
}

.return {
  background-color: #1296db;
  width: 40px;
  height: 40px;
  position: absolute;
  z-index: 1000;
  top: 2%;
  right: 2%;
  outline: none;
  border: none;
  border-radius: 50%;
}

.lowerList {
  display: inline-block;
  // border: #1296db 1px solid;
  width: 98%;
  height: 100%;
  //   background-color: #1296db;
  max-height: 71%;
  overflow-y: scroll;
  position: relative;
  z-index: 9;

  > div {
    padding-left: 1%;
    color: white;
    height: 60px;
    font-size: 120%;
    font-weight: bold;
    display: flex;
    justify-content: left;
    align-items: center;
    // border-bottom: rgb(148, 151, 154) 1px dashed;
    border-bottom: 1px solid;
    border-image: linear-gradient(to right, #fff, #0000);
    border-image-slice: 1;
    // border-bottom: rgba(18, 150, 219, 0.4) 1px dashed;
    > span {
      padding: 0.5% 1%;
      color: white;
      margin: 0 5px;
      border-radius: 5px;
    }
    > .noUse {
      background-color: #1296db;
    }
    > .qualifiedTrue {
      background-color: #029032;
    }
    > .qualifiedFalse {
      background-color: #d81e06;
    }
    > div {
      background-color: #1296db;
      margin-right: 1.5%;
      width: 5px;
      height: 40%;
      border-radius: 15px;
    }
  }
}

.lowerList > div > p:hover {
  text-shadow: 0 0 15px yellow;
}

.lowerList::-webkit-scrollbar {
  width: 3px;
}

.lowerList::-webkit-scrollbar-thumb {
  height: 25px;
  background: white;
  border-radius: 15px;
}

.lowerList::-webkit-scrollbar-track {
  background: transparent;
}

.buildingListFade-enter-active {
  transition: all 0.3s ease-out;
}

.buildingListFade-leave-active {
  transition: all 0.3s cubic-bezier(1, 0.5, 0.3, 1);
  transform: translateX(20%);
}

.buildingListFade-enter-from,
.buildingListFade-leave-to {
  transition: 0.3s;
  transform: translateX(20%);
  opacity: 0;
}
</style>